// 获得input文本框
let input = document.getElementById("btInput");
// 获得减数量的箭头按钮
let cutButton = document.getElementById("cutNum");

// 1.查找可能触发事件的元素
// 获得加数量的箭头按钮
let addButton = document.getElementById("addNum");
// 2. 绑定事件处理函数
addButton.onclick = function () {
  // 3. 查找可能被修改的元素,即input文本框的值
  let count = parseInt(input.value);
  // console.log(count)
  // 4. 修改元素
  if (count >= 1) {
    // count = parseInt(count);
    count++;
    // console.log(count);
  }
  input.setAttribute("value", count);
};

// 减数量
// 2. 绑定事件处理函数
cutButton.onclick = function () {
  // 3.查找可能被修改的元素,即input文本框的值
  let count = parseInt(input.value);
  console.log(count);
  // 4. 修改元素
  if (count > 1) {
    count--;
  }
  input.setAttribute("value", count);
};

let pics = [
  { md: "100/100_md1.jpg", lg: "400/400_lg1.jpg" },
  { md: "100/60_md2.jpg", lg: "400/400_lg2.jpg" },
  { md: "100/100_md3.jpg", lg: "400/400_lg3.jpg" },
  { md: "100/100_md4.jpg", lg: "400/400_lg4.jpg" },
  { md: "100/100_md5.jpg", lg: "400/400_lg5.jpg" },
  { md: "100/100_md6.jpg", lg: "400/400_lg6.jpg" },
  { md: "100/100_md7.jpg", lg: "400/400_lg7.jpg" },
  { md: "100/100_md8.jpg", lg: "400/400_lg8.jpg" },
];
let imgUlEle = $("#smallImg");
window.onload = function () {
  let html = ``;
  for (let p of pics) {
    html += `<li class="small-img"> 
                  <img src="../imgs/detail/${p.md}" data-lg="../imgs/detail/${p.lg}" alt="">
              </li>`;
  }
  imgUlEle.html(html);
  //   console.log($("#smallImg img"));
  // let imgEle = $("#smallImg img");
  $("#smallImg img").each(function () {
    let $this = $(this);
    // console.log($(this));
    $this.mouseenter(function () {
      let src = $this.data("lg");
      // console.log(src);
      let bigsrcEle = $(".bigImg img");
      //   console.log(bigsrcEle);
      bigsrcEle.attr("src", src);
    });
  });
};

// 小图点击左右箭头切图
let leftarrow = $(".small_left");
let rightarrow = $(".small_right");
let pic = 1;
leftarrow.click(() => {
  if (pic > 1) {
    pic--;
    let pxNum = -80 * (pic - 1);
    imgUlEle.css("margin-left", pxNum + "px");
  } else {
    pic = pics.length - 5;
    // console.log(pic);
    pxNum = -80 * pic;
    imgUlEle.css("margin-left", pxNum + "px");
    pic++;
  }
});
rightarrow.click(() => {
  if (pic < pics.length - 4) {
    let pxNum = -80 * pic;
    imgUlEle.css("margin-left", pxNum + "px");
    pic++;
    // console.log(`当前pic是:${pic}`);
  } else {
    pic = 1;
    imgUlEle.css("margin-left", "0px");
  }
});

// 点击小图片，显示大图片
// 1. 查找触发事件的元素
